<template>
  <div class="warp">
    <div class="box"></div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
    }
  },
  computed: {
  },
  methods: {
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
.warp{
  position: relative;
  width: 100%;
  height:100%;
  perspective: 600px;
  .box{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-100px;
    margin-top: -100px;
    width: 200px;
    height:200px;
    background: red;
    transform: rotateY(30deg);
    // transform: translateZ(-200px);
  }
}
</style>